<template>
  <el-row class="header-box">
    <el-col :span="3">
      <span class="logo">Hi!弹幕</span>
    </el-col>
    <el-col :span="3">
      <el-button class="hedaer-home-btn" type="text" icon="el-icon-s-home" @click="goHome">首页</el-button>
    </el-col>
    <el-col :span="3" :offset="9">
      <div class="btn-box" v-if="!userInfo">
        <el-button class="hedaer-btn" type="text" @click="login">登录</el-button>
        <el-button class="hedaer-btn" type="text" @click="register">注册</el-button>
      </div>
      <div class="btn-box" v-else>
        <el-avatar class="avatar" :src="userInfo.Face | toFaceUrl"></el-avatar>
        <el-button class="hedaer-btn" type="text" @click="mine">{{userInfo.Name}}</el-button>
        <el-button class="hedaer-btn" type="text" @click="logout">退出</el-button>
      </div>
    </el-col>
    <el-col :span="6">
      <div class="search-box">
        <el-input class="header-input" v-model="keyWord" placeholder="搜索关键词"></el-input>
        <el-button type="primary" icon="el-icon-search"  @click="search"></el-button>
      </div>
    </el-col>
  </el-row>
</template>

<script>
import { toFaceUrl } from "@/utils/url";
import Cookies from 'js-cookie'
export default {
  data() {
    return {
      keyWord: "",
    };
  },
  computed: {
    userInfo() {
      if (Cookies.get('userInfo')) {
        return JSON.parse(Cookies.get('userInfo'));
      } else {
        return null;
      }
    },
  },
  methods: {
    login() {
      this.$router.push({ name: "login" });
    },
    register() {
      this.$router.push({ name: "register" });
    },
    mine() {
      this.$router.push({ name: "mine" });
    },
    logout() {
      //清除token和用户信息并刷新页面
      Cookies.remove('token');
      Cookies.remove('userInfo');
      this.$router.go(0);
    },
    goHome(){
      this.$router.push({ name: "home" });
    },
    search() {
      if (!this.keyWord) {
        this.$message.error("请输入关键词");
      } else {
        this.$router.push({ name: "search", params: { search: this.keyWord } });
      }
    },
  },
  filters: {
    toFaceUrl(name) {
      return toFaceUrl(name);
    },
  },
};
</script>

<style scoped>
.header-box {
  background-color: #fff;
  height: 70px;
  min-width: 1600px;
  white-space: nowrap;
}

.logo {
  color: #2d8cf0;
  font-size: 40px;
  padding-left: 60px;
}

.btn-box {
  margin: 16px;
}

.avatar{
  margin-right: 10px;
  float: left;
}

.hedaer-btn {
  font-size: 16px;
  color: #353535;
}

.hedaer-home-btn {
  margin-top: 6px;
  font-size: 20px;
}

.search-box {
  margin: 16px;
}

.header-input {
  width: 80%;
  margin: 0 10px;
}
</style>